<template>
  <div id="category">
    <nav-bar class="nav-bar"><div slot="center">商品分类</div></nav-bar>
    <div class="content">
      <scroll id="tab-menu" :data="[categoryData]">
        <tab-menu
          :categories="categories"
          @selectItem="selectItem"
          ref="menu"
        ></tab-menu>
      </scroll>
      <scroll id="tab-content" :data="[categoryData]">
        <!-- 监听categoryData值的改变， -->
        <tab-content-category
          :subcategories="showSubcategory"
        ></tab-content-category>
        <tab-control
          :titles="['综合', '新品', '销量']"
          @tabClick="tabClick"
        ></tab-control>
        <tab-control-detail
          :category-detail="showCategoryDetail"
        ></tab-control-detail>
      </scroll>
    </div>
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar"; //顶部导航
import TabMenu from "./compons/TabMenu"; //左侧边菜单栏
import TabContentCategory from "./compons/TabContentCategory"; //右侧分类商品
import TabControl from "components/content/tabcontrol/TabControl"; //商品推荐控制导航
import TabControlDetail from "./compons/TabContentDetail"; //商品推荐

import Scroll from "components/common/scroll/Scroll";
import { tabControlMinXin } from "common/mixin";

import {
  getCategory,
  getSubcategory,
  getCategoryDetail
} from "network/category"; //请求数据

export default {
  name: "Category",
  components: {
    NavBar,
    TabMenu,
    TabContentCategory,
    Scroll,
    TabControl,
    TabControlDetail
  },
  mixins: [tabControlMinXin],
  data() {
    return {
      categories: [],
      categoryData: {},
      currentIndex: -1
    };
  },
  created() {
    // 1.请求分类数据
    this._getCategory();
  },
  computed: {
    showSubcategory() {
      if (this.currentIndex === -1) return {}; //防止数据还未请求到报错
      return this.categoryData[this.currentIndex].subcategories;
    },
    showCategoryDetail() {
      if (this.currentIndex === -1) return [];
      return this.categoryData[this.currentIndex].categoryDetail[
        this.currentType
      ];
    }
  },
  methods: {
    //1.左侧分类的列表
    _getCategory() {
      getCategory().then(res => {
        this.categories = res.data.category.list;
        // 1-1.创建每个类别的推荐数据初始化
        for (let i = 0; i < this.categories.length; i++) {
          this.categoryData[i] = {
            subcategories: {},
            categoryDetail: {
              pop: [],
              new: [],
              sell: []
            }
          };
        }
        // 1-2.请求第一个分类的数据
        this._getSubcategories(0);
      });
    },
    //2.右侧分类数据
    _getSubcategories(index) {
      this.currentIndex = index;
      const mailKey = this.categories[index].maitKey;
      getSubcategory(mailKey).then(res => {
        this.categoryData[index].subcategories = res.data;
        this.categoryData = { ...this.categoryData };

        this._getCategoryDetail("pop");
        this._getCategoryDetail("new");
        this._getCategoryDetail("sell");
      });
    },
    //3.推荐数据获取
    _getCategoryDetail(type) {
      //3-1获取数据
      const miniWallkey = this.categories[this.currentIndex].miniWallkey;
      //3-2请求数据
      getCategoryDetail(miniWallkey, type).then(res => {
        this.categoryData[this.currentIndex].categoryDetail[type] = res;
        this.categoryData = { ...this.categoryData };
        console.log(this.categoryData);
      });
    },
    //事件响应相关的方法
    selectItem(index) {
      this._getSubcategories(index);
    }
  }
};
</script>

<style scoped>
#category {
  height: 100vh;
}

.nav-bar {
  background-color: var(--color-tint);
  font-weight: 700;
  color: #fff;
}

.content {
  position: absolute;
  left: 0;
  right: 0;
  top: 44px;
  bottom: 49px;
  display: flex;
}
#tab-menu {
  background-color: #f6f6f6;
  height: 100%;
  width: 100px;
  box-sizing: border-box;
  overflow: hidden;
}
#tab-content {
  height: 100%;
  flex: 1;
  overflow: hidden;
}
</style>
